<template>
  <view class="cart-container">
    <!-- 购物车为空 -->
    <view class="empty-cart" v-if="cartList.length === 0">
      <u-icon name="shopping-cart" size="100" color="#cccccc"></u-icon>
      <text>购物车还是空的</text>
      <view class="go-shopping-btn" @click="goToIndex">去逛逛</view>
    </view>
    
    <!-- 购物车列表 -->
    <view class="cart-list" v-else>
      <view class="cart-item" v-for="(item, index) in cartList" :key="index">
        <view class="checkbox">
          <u-checkbox v-model="item.checked" shape="circle" @change="calcTotal"></u-checkbox>
        </view>
        <view class="item-image" @click="goToDetail(item)">
          <u-image width="160rpx" height="160rpx" :src="item.image"></u-image>
        </view>
        <view class="item-info">
          <view class="item-name" @click="goToDetail(item)">{{ item.name }}</view>
          <view class="item-spec">{{ item.spec }}</view>
          <view class="item-bottom">
            <text class="item-price">¥{{ item.price }}</text>
            <u-number-box v-model="item.quantity" :min="1" :max="99" @change="updateCart"></u-number-box>
          </view>
        </view>
        <view class="delete-btn" @click="removeItem(index)">
          <u-icon name="trash" size="40rpx" color="#909399"></u-icon>
        </view>
      </view>
    </view>
    
    <!-- 底部结算栏 -->
    <view class="bottom-bar" v-if="cartList.length > 0">
      <view class="select-all">
        <u-checkbox v-model="selectAll" shape="circle" @change="selectAllItems">全选</u-checkbox>
      </view>
      <view class="total-box">
        <text class="total-price">合计: <text class="price">¥{{ totalPrice.toFixed(2) }}</text></text>
      </view>
      <view class="checkout-btn" @click="checkout">
        <text>结算({{ totalCount }})</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: [],
      selectAll: false,
      totalPrice: 0,
      totalCount: 0
    }
  },
  onShow() {
    // 每次显示页面时重新获取购物车数据
    this.getCartList();
    this.calcTotal();
  },
  methods: {
    getCartList() {
      const cartData = uni.getStorageSync('cartList');
      if (cartData) {
        try {
          this.cartList = JSON.parse(cartData);
          // 初始化选中状态
          this.cartList.forEach(item => {
            if (typeof item.checked === 'undefined') {
              this.$set(item, 'checked', false);
            }
          });
        } catch (e) {
          this.cartList = [];
        }
      } else {
        this.cartList = [];
      }
      
      // 检查是否全选
      this.checkSelectAll();
    },
    updateCart() {
      // 更新本地存储
      uni.setStorageSync('cartList', JSON.stringify(this.cartList));
      this.calcTotal();
    },
    removeItem(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这个商品吗？',
        success: res => {
          if (res.confirm) {
            this.cartList.splice(index, 1);
            this.updateCart();
            this.checkSelectAll();
          }
        }
      });
    },
    calcTotal() {
      let price = 0;
      let count = 0;
      
      this.cartList.forEach(item => {
        if (item.checked) {
          price += item.price * item.quantity;
          count += item.quantity;
        }
      });
      
      this.totalPrice = price;
      this.totalCount = count;
    },
    selectAllItems() {
      this.cartList.forEach(item => {
        item.checked = this.selectAll;
      });
      
      this.calcTotal();
    },
    checkSelectAll() {
      this.selectAll = this.cartList.length > 0 && this.cartList.every(item => item.checked);
    },
    goToIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    goToDetail(item) {
      uni.navigateTo({
        url: `/subPack/product/detail?id=${item.id}`
      });
    },
    checkout() {
      if (this.totalCount === 0) {
        uni.showToast({
          title: '请选择商品',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到订单确认页面
      uni.navigateTo({
        url: '/pages/order/confirm'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.cart-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 100rpx;
  
  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200rpx;
    
    text {
      font-size: 28rpx;
      color: #909399;
      margin: 30rpx 0;
    }
    
    .go-shopping-btn {
      width: 200rpx;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      background-color: #306EF6;
      color: #ffffff;
      font-size: 28rpx;
      border-radius: 35rpx;
    }
  }
  
  .cart-list {
    .cart-item {
      display: flex;
      align-items: center;
      background-color: #ffffff;
      padding: 20rpx;
      margin-bottom: 20rpx;
      
      .checkbox {
        margin-right: 20rpx;
      }
      
      .item-image {
        margin-right: 20rpx;
      }
      
      .item-info {
        flex: 1;
        
        .item-name {
          font-size: 28rpx;
          color: #303133;
          margin-bottom: 10rpx;
        }
        
        .item-spec {
          font-size: 24rpx;
          color: #909399;
          margin-bottom: 20rpx;
        }
        
        .item-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .item-price {
            font-size: 32rpx;
            color: #fa3534;
            font-weight: bold;
          }
        }
      }
      
      .delete-btn {
        padding: 20rpx;
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .select-all {
      padding: 0 30rpx;
    }
    
    .total-box {
      flex: 1;
      
      .total-price {
        font-size: 28rpx;
        color: #303133;
        
        .price {
          font-size: 32rpx;
          color: #fa3534;
          font-weight: bold;
        }
      }
    }
    
    .checkout-btn {
      width: 200rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      background-color: #fa3534;
      color: #ffffff;
      font-size: 28rpx;
    }
  }
}
</style> 